<template>
  <div class="content">
    <div class="title-logo">
      <img class="logo" src="@/assets/chip/logo.png" alt="logo" />
      <div class="line"></div>
    </div>
    <div
      class="title"
      v-html="'量准微纳生物芯片<br/> 设计、制造、表征及生物检测服务'"
    ></div>
    <div class="introduce">
      量准是一家聚焦"微纳生物传感器芯片"研发、制造、测试和应用的公司，目前办公地点分布于上海、武汉和杭州。在杭州和武汉汉光谷拥有超过2000平方米的研发制造测试实验室，并在上海投资建设近1000平方米的千级净化芯片生产工厂、量准专注于微纳级别光电和电化学生物传感器芯片以及配套检测仪器产品的设计、研发和生产，已搭建完整的生物传感器芯片和仪器设计制造设施及多学科交叉融合的高级技术人员团队，能够快速高质量的完成创新生物芯片产品的研发制造任务，具备为中国生物芯片科研团队和企业发展提供高端技术服务的能力。
    </div>
    <div class="introduce">
      量准拥有整套的微纳生物芯片和电化学传感器设计生产工艺，建立了独特微纳生物芯片设计及加工平台。可提供从芯片基材表面处理（等离子清洗）、模板微纳结构无损转印（纳米压印）、表面镀膜（高真空蒸发和磁溅射镀膜）、切割成型（紫外激光切割）、构建组装、表面修饰和常规及数作微流控模组等整套生物芯片系统的设计及生产加工服务，并配套接触角测试、高精度电子和光学显微镜、全频扫描分光光度计、电化学工作站、半导体器件探针台等测试设备，对芯片进行严格测试，保证其性能及质量达到设计要求。同时具备一整套生物芯片表面处理、修饰、组件集成和检测服务能力，包括芯片生物化学修饰、自动点样包被、微流控芯片设计与加工服务等，帮助客户以高性价比实现Form
      Idea To
      Product的一整套全流程生物芯片和检测仪器产品的CDM定制开发及后续的OEM代工制造生产。
    </div>
    <div class="introduce_img">
      <img src="@/assets/chip/pic.png" alt="" />
    </div>
    <div class="characteristic_box">
      <div class="features">服务特色</div>
      <div class="features_content">
        应用生物芯片设计、微纳加工、生产以及生物修饰和监测应用，可根据客户的独特需求提供相应的生物设计、加工、修饰、测试等一站式配套服务。主要特色工艺包括：
      </div>
    </div>
    <div class="characte_content">
      <div v-for="item, index in list" :key="index">
        <div class="sub_title">{{ item.tt }}</div>
        <div class="characte_text" v-for="subItem, subIndex in item.itemList" :key="subIndex">
          <strong>{{ subItem.sub }}</strong>
          {{ subItem.text }}
        </div>
      </div>
    </div>
    <div class="service_progress">
      <div class="progress_title">量准生物芯片设计、加工、修饰、检测服务流程</div>
      <table align="center" border="0" cellspacing="0" class="table">
        <thead>
          <tr>
            <td v-for="item in thead">{{ item }}</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tbody">
            <td>{{ item.str1 }}</td>
            <td>{{ item.str2 }}</td>
            <td>{{ item.str3 }}</td>
          </tr>
        </tbody>
      </table>
      <div class="deliver">
        <div class="deliver_item" v-for="item in deliver">
          <p class="deliver_tt">{{item.tt}}</p>
          <ul>
            <li v-for="sub in item.list">{{sub}}</li>
          </ul>
        </div>
      </div>
      <div class="advantage">
        <div class="advantage_box">
          <div class="advantage_box_title">服务优势</div>
        </div>
      </div>
      <div class="advantage_content">
        <div class="content_item">
          <img src="@/assets/chip/icon2.png" alt="icon" />
          <div
            class="content_text"
            v-html="
              '精确、快速的工艺设计及验证一站式“交钥匙”服务，为客户节省时间'
            "
          ></div>
        </div>
        <div class="content_item">
          <img src="@/assets/chip/icon1.png" alt="icon" />
          <div
            class="content_text"
            v-html="
              '拥有高精度的设备和专业的技术专家，确保芯片工艺的精准把控及芯片的性能及质量'
            "
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          tt: "生物芯片设计生产主要工艺",
          itemList: [
            {
              sub: "1. 等离子(Plasma)清洗：",
              text:
                "利用高能等离子体对芯片基材表面进行清洁，并通过等离子体提高材料表面性能的一致性；"
            },
            {
              sub: "2. 纳米压印：",
              text:
                "通过光刻胶辅助将木板上的微纳结构转移到芯片基材上。模板可反复使用，具有超高分辨率（20nm）、低成本、一致性高的技术优点；"
            },
            {
              sub: "3. 高真空电子束蒸发和磁控溅射镀膜：",
              text:
                "基材表面根据需求分别蒸镀上各种金属、金属氧化物、半导体、半导体氧化物等多种物质材料，可自主设定镀膜速度和厚度（可低至5nm）；"
            },
            {
              sub: "4. 紫外激光切割、打标：",
              text: "可灵活设计芯片形状并实现精度、低污染的切割及标记；"
            }
          ]
        },
        {
          tt: "芯片性能及质量测试",
          itemList: [
            {
              sub: "5. 表面液相接触角测试：",
              text: "精确测量各种液体在基材或芯片表面接触角；"
            },
            {
              sub: "6. 微纳结构测试(高精度扫描电镜、光学显微镜及相关设备)：",
              text:
                "通过高倍数、高精度的点子和光学显微镜及成像技术，精准的测量和分析芯片结构及性能；"
            },
            {
              sub: "7. 光学芯片性能表征：",
              text:
                "采用不同光学检测仪器(全频扫描分光光度计、光谱仪及相关设备)对芯片的光学性能(灵敏度及一致性)进行表征；"
            }
          ]
        },
        {
          tt: "生物芯片修饰及检测",
          itemList: [
            {
              sub: "8. 功能化芯片制备与表征：",
              text:
                "通过静电吸附或共价键形式的生物化学处理对芯片表面进行功能化修饰，可根据需要提供多种Ready-to-Use的生物芯片；"
            },
            {
              sub: "9. 点样包被：",
              text:
                "将芯片表面特殊处理后，可经非接触式的点样方式将不同核酸、蛋白、抗体、多肽、细胞和试剂溶液样品通过特定的高速点样机器人直接点在芯片上，保证定量点样准确，重复性好；"
            },
            {
              sub: "10. 生物传感器芯片检测验证与优化：",
              text:
                "可根据客户需要修饰的配体性质，定制生物芯片的修饰包被方法，并通过待测物的梯度检测效果验证，摸索最优芯片的修饰和检测方法，提供产品最佳的灵敏度和特异性定制方案。"
            }
          ]
        }
      ],
      thead: ["服务项目", "服务内容", "服务周期"],
      tbody: [
        {
          str1: "生物芯片工艺测试",
          str2: "根据客户需求进行工艺测试及验证",
          str3: "1 ~ 2周"
        },
        {
          str1: "芯片生产",
          str2: "根据客户需求生产并提供芯片成品",
          str3: "1 ~ 2周开始供货"
        },
        {
          str1: "生物芯片工艺测试",
          str2: "根据客户需求进行芯片性能测试",
          str3: "1 ~ 2周"
        },
        {
          str1: "芯片修饰与检测验证",
          str2: "根据客户需求进行芯片修饰与验证",
          str3: "1 ~ 2周"
        }
      ],
      deliver: [
        {
          tt: "客户提供：",
          list: ["芯片设计模板", "样品原型", "代加工中间产品或最终产品"]
        },
        {
          tt: "交付内容：",
          list: [
            "芯片成品",
            "根据客户要求提供相关工艺参数及性能数据",
            "根据客户要求提供最优芯片制造、修饰、测试方案及配套试剂"
          ]
        }
      ],
    };
  }
};
</script>

<style lang="scss" scoped>
.content {
  color: #fff;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: url("~@/assets/chip/bg.jpg") no-repeat;
  padding: 20px;
  .title-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
      object-fit: contain;
      width: 140px;
      height: 40px;
      margin-right: 20px;
    }
    .line {
      border-radius: 50%;
      height: 2px;
      width: 78%;
      background-color: #fff;
    }
  }

  .title {
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0;
  }

  .introduce {
    text-indent: 2em;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 1px;
  }

  .introduce_img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    margin: 10px 0;
    padding: 10px;
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .characteristic_box {
    // display: flex;
    // align-items: center;
    .features {
      width: fit-content;
      padding: 6px 20px;
      font-size: 20px;
      margin-bottom: 10px;
      border-radius: 10px 10px 0 10px;
      font-weight: bold;
      color: #0098ba;
      background-color: #fff;
      white-space: nowrap;
      margin-right: 30px;
    }
    .features_content {
      font-size: 17px;
      line-height: 1.5;
      letter-spacing: 1px;
    }
  }

  .characte_content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 15px;
    margin: 15px 0;
    box-sizing: border-box;
    border-radius: 6px;
    .sub_title {
      display: inline-block;
      font-weight: bold;
      border-radius: 6px 6px 0 6px;
      background-color: #0099bb;
      padding: 10px 15px;
      font-size: 18px;
      color: #fff;
      margin: 10px 0;
    }
    .characte_text {
      color: #0098bb;
      font-size: 16px;
      line-height: 1.6;
    }
  }

  .service_progress {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
    border-radius: 6px;
    .progress_title {
      display: inline-block;
      font-weight: bold;
      border-radius: 6px 6px 0 6px;
      background-color: #0099bb;
      padding: 10px 15px;
      font-size: 17px;
      color: #fff;
      margin: 10px 0;
    }
    .table {
      width: 100%;
      border-radius: 4px;
      text-align: center;
      margin: 10px 0 20px;
      border-right: 1px solid #0098ba;
      border-left: 1px solid #0098ba;
      border-bottom: 1px solid #0098ba;
      thead {
        background-color: #d3ecf3;
        color: #0098ba;
        font-weight: 700;
      }

      tr {
        font-size: 14px;
        color: #0098ba;
        box-sizing: border-box;
        td {
          padding: 12px 4px;
          border-top: 1px solid #0098ba;
          border-right: 1px solid #0098ba;
        }
        & td:last-child {
          border-right: none;
        }
      }

      thead td:first-child {
        border-radius: 4px 0 0 0;
      }

      thead td:last-child {
        border-radius: 0 4px 0 0;
      }

      tbody tr:last-child {
        td:first-child {
          border-radius: 0 0 0 4px;
        }

        td:last-child {
          border-radius: 0 0 4px 0;
        }
      }
    }
    .deliver {
      color: #0098ba;
      display: flex;
      &_item {
        flex: 1;
        height: 100%;
        .deliver_tt {
          text-align: center;
          font-weight: bold;
          font-size: 18px;
          line-height: 1.6;
        }
        ul {
          padding-left: 20px;
          li {
            padding: 5px 0;
            font-size: 15px;
            list-style: disc;
          }
        }
      }
      // &_item:first-child {
      //   margin-right: 100px;
      // }
    }
    .advantage {
      height: 2px;
      width: 100%;
      background-color: #0099bb;
      border-radius: 1px;
      margin: 30px 0;
      position: relative;
      &_box {
        position: absolute;
        left: 50%;
        top: 0;
        padding: 10px 20px;
        transform: translateX(-50%) translateY(-50%);
        background-color: #fff;
        &_title {
          font-size: 18px;
          color: #fff;
          border-radius: 6px;
          background-color: #0099bb;
          padding: 7px 10px;
        }
      }
    }
    .advantage_content {
      color: #0098ba;
      // display: flex;
      // flex-direction: column;
      .content_item {
        // flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
        img {
          width: 50px;
          height: 50px;
        }
        .content_text {
          padding: 0 20px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
